<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2023-02-09 17:08:30
 * @LastEditTime: 2023-04-06 17:42:58
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\Setting\changePassword.vue
 * Copyright 版权声明
-->
<template>
  <div class="app-container">
    <el-form :rules="rules" ref="form" :model="form" label-width="120px" style="max-width:600px;">
      <el-form-item label="原密码" prop="yh_mm">
        <el-input :type="pwdType" autocomplete="off" v-model="form.yh_mm" class="test">
          <template #suffix>
            <el-icon :class="{openView: pwdType === ''}" @click="showPwd()" style="cursor:pointer;"><View /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="yh_mm1">
        <el-input :type="pwdType" v-model="form.yh_mm1" autocomplete="off" auto-complete="new-password">
          <template #suffix>
            <el-icon :class="{openView: pwdType === ''}" @click="showPwd()" style="cursor:pointer;"><View /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="yh_mm2">
        <el-input v-model="form.yh_mm2" :type="pwdType" autocomplete="off" auto-complete="new-password">
          <template #suffix>
            <el-icon :class="{openView: pwdType === ''}" @click="showPwd()" style="cursor:pointer;"><View /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="btnLoading">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { changePassword } from '@/api/login'
import { View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import md5 from 'js-md5'
import { validatePssword } from '@/utils/validate'

export default {
  components: {
    View
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (!validatePssword(value)) {
        callback(new Error('密码6-16位，必须包含：首字母大写、英文字母、特殊字符、数字'))
      } else {
        callback()
      }
    }
    const validatePass1 = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请确认密码'))
      } else {
        if (this.form.yh_mm1 !== this.form.yh_mm2) {
          callback(new Error('输入密码不一致'))
        } else {
          callback()
        }
      }
    }
    return {
      btnLoading: false,
      form: {
        yh_mm: '',
        yh_mm1: '',
        yh_mm2: ''
      },
      rules: {
        yh_mm: [{ required: true, message: '请填写原密码', trigger: 'change' }],
        yh_mm1: [{ required: true, trigger: 'change', validator: validatePass }],
        yh_mm2: [{ required: true, trigger: 'change', validator: validatePass1 }]
      },
      pwdType: 'password'
    }
  },
  methods: {
    // 切换密码显示方式
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          const params = {
            oldPwd: md5(this.form.yh_mm.trim()),
            newPwd: md5(this.form.yh_mm1.trim()),
            confirmPwd: md5(this.form.yh_mm2.trim())
          }
          changePassword(params).then(response => {
            this.btnLoading = false
            // this.$notify({
            //   title: '成功',
            //   message: '修改成功',
            //   type: 'success',
            //   duration: 2000
            // })
            if (response.code === 200) {
              ElMessage({
                type: 'success',
                message: '密码修改成功,即将退出,请重新登陆！'
              })
              setTimeout(() => {
                this.$store.dispatch('LogOut').then(() => {
                  location.reload() // 为了重新实例化vue-router对象 避免bug
                })
              }, 1200)
            }
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    },
    onCancel() {
      this.$refs['form'].clearValidate()
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.openView{
  color: green;
}
</style>

